<!-- 家政服务 -->
<template>
	<view class="housekeeping">
		<!-- 导航 -->
		<view class="nav">
			<template v-for="(item, i) in navs">
				<view class="navitem" :class="currentIndex == i ? 'active' : ''" @click="chang_index(i)" :key="item.id">
					{{ item.title }}
				</view>
			</template>
		</view>
		<!-- 公司列表 -->
		<view class="content" v-if="cons.length>0">
			<template v-for="item in cons">
				<view class="contet_list_item" :key="item.id" @click="go_detail(item.id)">
					<view class="item_left">
						<image :src="item.image_url" mode=""></image>
					</view>
					<view class="item_right">
						<view class="title">{{item.name}}</view>
						<view class="addres">
							<image src="https://community.chuangxiangdianli.com/images/neighborimg/housekeeping/jia_dizhi.png" mode=""></image>
							<text>
								{{item.province_name}}{{item.city_name}}{{item.area_name}}{{item.address}}
							</text>
						</view>
						<view class="phone">
							<text>{{item.mobile}}</text>
							<image src="https://community.chuangxiangdianli.com/images/neighborimg/housekeeping/jia_phone.png" mode=""></image>
						</view>
					</view>
				</view>
			</template>
			
		</view>
		<view class="no-data" v-if="cons.length<=0">
			<u-empty text="列表为空" mode="list"></u-empty>
		</view>
		<view v-if="cons.length>0">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
// 引入封装的请求
import request from '@/utils/request.js'
export default {
	data() {
		return {
			navs: [],
			currentIndex: 0,
			// 当前的分类id
			cate_id:'',
			// 内容列表
			cons:[],
			// 当前的页码
			pageNo:1,
			// 是否正在请求数据
			is_loading:false,
			// 是否已经没有数据
			is_boottom:false,
			// 底部正在加载中
			status: 'loadmore',
		};
	},
	onLoad() {
		this.get_nav_list()
	},
	onShow() {
		
	},
	// 页面底部加载
	onReachBottom(){
		let that = this
		this.status = 'loading';
		// console.log(11111)
		if(that.status = 'nomore' || that.is_loading){
			return false
		}
		this.pageNo++
		setTimeout(() => {
			that.get_con_list(true)
		}, 1000)
	},
	methods: {
		// 改变导航索引
		chang_index(i) {
			this.currentIndex = i;
			this.cate_id = this.navs[i].id
			this.is_loading = false
			this.is_boottom = false
			this.get_con_list()
		},
		// 前往详情页面
		go_detail(id){
			// console.log(id)
			uni.navigateTo({
				url:'/neighbor/recycling/companyDetail?id='+id
			})
		},
		// 获取导航分类
		get_nav_list(){
			let that = this
			request.get('Mini/other/cateList/4').then(res => {
				// console.log('首页数据', res)
				if (res.code==200) {
					that.navs = res.data
					that.cate_id = that.navs[0].id
					that.get_con_list()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}).catch(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			})
		},
		// 获取内容列表
		get_con_list(turn){
			let that = this
			request.post({
				url:'Mini/other/getInfoList',
				data:{
					type:4,
					cate_id:that.cate_id,
					page:that.pageNo
				},
			}).then(res => {
				// console.log('首页数据', res)
				if (res.code==200) {
					if(turn){
						if(res.data.data.length>0){
							that.cons = [
								...that.cons,
								...res.data.data
							]
						}
					}else if(!turn){
						that.cons = res.data.data
					}
					if(res.data.total==that.cons.length){
						// that.is_boottom = true
						that.status = 'nomore';
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}).catch(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			})
		}
	}
};
</script>

<style lang="scss">
.housekeeping {
	.content {
		width: 100%;
		margin-top: 108rpx;
		box-sizing: border-box;
		// padding: 10rpx;
		border-top: 2rpx solid #f7f8f9;
		border-bottom: 2rpx solid #f7f8f9;
		.contet_list_item {
			width: 100%;
			height: 270rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.item_left {
				width: 30%;
				text-align: center;
				image {
					width: 204rpx;
					height: 204rpx;
				}
			}

			.item_right {
				width: 70%;
				text-align: left;
				box-sizing: border-box;
				padding: 0 20rpx;
				.title {
					height: 40%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					overflow: hidden;
					-webkit-box-orient: vertical;
					margin-bottom: 10rpx;
				}
				.addres {
					height: 30%;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					overflow: hidden;
					-webkit-box-orient: vertical;
					margin-bottom: 18rpx;
					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
					text {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #636363;
					}
				}
				.phone {
					height: 30%;
					text-align: right;
					image {
						width: 33rpx;
						height: 34rpx;
						margin-left: 10rpx;
						margin-right: 20rpx;
						vertical-align: middle;
					}
				}
			}
		}
	}
	.no-data{
		padding-top: 110rpx;
	}

	.nav {
		height: 105rpx;
		display: flex;
		align-items: center;
		overflow: auto;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		.navitem {
			width: 200rpx;
			height: 100%;
			line-height: 105rpx;
			font-size: 32rpx;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 0 40rpx;
			white-space: nowrap;
		}
		.active {
			color: #ff7430;
			border-bottom: 6rpx solid #ff7430;
		}
	}
}
</style>
